<template>
  <div>
    <!-- 树菜单 -->
    <div class="block" :style="pageStyle">
      <el-tree :data="dataList" node-key="id" :props="defaultProps" accordion  ref="menuTree" :expand-on-click-node="false">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span class="optionBtn">
            <el-button circle icon="el-icon-upload2" size="mini" type="primary" @click="uploade(node,data)"></el-button>
            <el-button circle icon="el-icon-view" size="mini" type="success" @click="viewPdf(node, data)"></el-button>
          </span>
        </span>
      </el-tree>
    </div>
     
    <el-dialog title="上传使用说明书" width="1000px" top="50px" :visible.sync="uploadDialog.isShow" :close-on-click-modal="false" class="bodyNopaddingTop">
      <div>
        <el-upload
          class="upload-demo text-center"
          ref="uploadDraw"
          drag
          :action="uploadDialog.appendixUrl"
          multiple
          :on-success="uploadDrawSuccess" 
          :on-error="uploadDrawError" 
          :limit="1">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传pdf文件</div>
        </el-upload>
      </div>
    </el-dialog>
      <!-- 使用说明 -->
    <el-dialog title="使用说明" width="1000px" top="50px" :visible.sync="instructionsDialog.isShow" :close-on-click-modal="false" class="bodyNopaddingTop">
      <div :style="instructionsDialog.instructionsHeight">
        <div style="overflow: hidden;">
          <div style="width: 99%;margin: 0 auto;">
            <el-input v-model.number="instructionsDialog.pdfOption.drawingPage" type="number" style="width: 150px;" min="1" :max="instructionsDialog.pdfOption.drawingNumPages"></el-input>
            <span>/{{instructionsDialog.pdfOption.drawingNumPages}}</span>
            <el-button @click="instructionsDialog.pdfOption.drawingRotate += 90">&#x27F3;</el-button>
            <el-button @click="downloadAppendixPDF">下载</el-button>
            <pdf ref="drawingPdf"
              style="border: 1px solid red;display: block;"
              :src="instructionsDialog.pdfOption.drawingSrc" 
              :page="instructionsDialog.pdfOption.drawingPage"
              :rotate="instructionsDialog.pdfOption.drawingRotate" 
              @progress="drawingLoadedRatio = $event" 
              @num-pages="instructionsDialog.pdfOption.drawingNumPages = $event" 
              @link-clicked="instructionsDialog.pdfOption.drawingPage = $event">
            </pdf>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import operationManualApi from 'plugins/axios/operationManualApi.js'
import baseApi from 'plugins/axios/baseApi.js'
import pdf from 'vue-pdf';
import {mapState} from 'vuex'
export default {
  components:{pdf},
  data(){
    return {
      dataList:[],
      defaultProps:{
        children: 'children',
        label: 'name',
        id: 'id'
      },
      uploadDialog:{
         isShow:false,
         appendixUrl:''
      },
      /**使用说明弹框 */
      instructionsDialog:{
        isShow:false,
        id:'',
        instructionsHeight: {
          height: (document.documentElement.clientHeight - 210) + 'px',
          overflowY: 'auto'
        },
        pdfOption:{
          drawingPage: 1,
          drawingNumPages:0,
          drawingRotate: 0,
          drawingSrc:"",
          drawingLoadedRatio: 0,
        }
      },
    }
  },
   computed:{
    ...mapState({clientHeight:state=>state.common.clientHeight}),
    pageStyle(){
      return {
        'height':(this.clientHeight-150)+'px',
        'overflow-y': 'auto'
      };
    }
  },
  mounted(){
    this.getMenuList();
  },
  methods:{
    getMenuList(){
      let self = this;
      operationManualApi.getMenu().then(res=>{
        self.dataList = res.content;
      })
    },
    viewPdf(node,data){
      let self = this;
      self.instructionsDialog.isShow = true;
      self.instructionsDialog.pdfOption.drawingPage = 1;
      self.instructionsDialog.pdfOption.instructionsPage = 1;
      self.instructionsDialog.pdfOption.drawingSrc = baseApi.viewInstructionsUrl(data.id);
      self.instructionsDialog.id=data.id;
    },
    /**点击显示上传弹框 */
    uploade(node,data){
      let self = this;
      self.uploadDialog.isShow = true;
      self.uploadDialog.appendixUrl =baseApi.uploadInstructionsUrl(data.id);
    },
     /**上传使用说明成功*/ 
    uploadDrawSuccess(response, file, fileList) {
      if (response.statusCode == 200) {
        this.$refs.uploadDraw.clearFiles();
        this.$message.success('上传成功');
        this.uploadDialog.isShow = false;
        this.instructionsDialog.pdfOption.drawingSrc ="";
      } else {
        this.$message.error(response.desc)
      }
    },
    /**上传使用说明失败*/ 
    uploadDrawError(response, file, fileList) {
      this.$message.error(response);
    },
    /**下载pdf */
    downloadAppendixPDF() {
      window.location.href =baseApi.downloadInstructionsUrl(this.instructionsDialog.id);
    },
  }
}
</script>
<style lang="stylus" scoped>
.content-top
  margin-bottom 16px
.custom-tree-node
  flex 1
  font-size 14px
  padding-right 8px
  >span:first-child
    margin 0 40px 0 0
  >span:nth-child(2)
    display none
  &:hover>span:nth-child(2)
    display inline-block
</style>